<!--
 * @Author: zhw 443844039@qq.com
 * @Date: 2025-08-23 19:55:17
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-23 20:01:43
 * @Description: 课程教学评估
-->
<template>
  <div class="panel">
    <div class="header">
      <div class="title-wrapper">
        <div class="blue-line"></div>
        <h3>课程教学评估</h3>
      </div>
    </div>
    <div id="trChart" ref="trChart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { theCourseTeachingApi } from '@/api/operationAnalysis'
export default {
  data() {
    return {
      
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.trChart)
      theCourseTeachingApi().then(res => {
      let data = res.data;
      const total = data.completed + data.continuing + data.waitStart;

        let option = {
          //中央自定义文字
          title: {
              text: total,
              left: "center",
              top: "50%",
              textStyle: {
                textAlign: "center",
                fill: "#333",
                fontSize: 18,
                fontWeight: 400,
              }
            },
            graphic: {
              type: "text",
              left: "center",
              top: "40%",
              style: {
                text: "总计",
                textAlign: "center",
                fill: "#333",
                fontSize: 20,
              }
            },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            y:'bottom',
          },
          series: [
            {
              type: 'pie',
              radius: ['60%', '75%'],
              data: [
                { value: data.completed, name: '已完成', itemStyle:{color:'#6395FA'} },
                { value: data.continuing, name: '进行中', itemStyle:{color:'#6CC1E2'} },
                { value: data.waitStart, name: '待开课', itemStyle:{color:'#7666FA'} },
              ],
            }
          ]
        };
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.panel {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
}

.header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #1E62FF;
  margin-right: 12px;
  border-radius: 2px;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>